// 登录组件
import React from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { connect } from 'react-redux';  
import { login } from '../../redux/user-redux';


@connect(state => state.user, {login})
class NormalLoginForm extends React.Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // 登录请求
        this.props.login(values);
      }
    });
  }

  render() {
  	const FormItem = Form.Item;
    const { getFieldDecorator } = this.props.form;
    return (
    	<div>
      	<Form onSubmit={this.handleSubmit} className="login-form">
	        <FormItem>
	          {getFieldDecorator('email', {
	            rules: [{ required: true, message: '请输入邮箱' }],
	          })(
	            <Input prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="邮箱" />
	          )}
	        </FormItem>
	        <FormItem>
	          {getFieldDecorator('password', {
	            rules: [{ required: true, message: '请输入密码' }],
	          })(
	            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
	          )}
	          {/* 错误提示 */}
	          {this.props.msg ? <span className="error-msg">{this.props.msg}</span> : null}
	        </FormItem>
	        <FormItem>
	          {getFieldDecorator('remember', {
	            valuePropName: 'checked',
	            initialValue: true,
	          })(
	            <Checkbox>记住密码</Checkbox>
	          )}
	          <a className="login-form-forgot" href="">忘记密码</a>
	          <Button type="primary" htmlType="submit" className="login-form-button">
	            登 录
	          </Button>
	          没有账号？ <a>现在去注册</a>
	        </FormItem>
	      </Form>
	    </div>
    );
  }
}

const Login = Form.create()(NormalLoginForm);
export default Login;